<template>
    <div id="manufacturer">
        <!-- <img src="../assets/image/manufacture/textbg.jpg" alt=""> -->
        <h2>生产厂家列表</h2>
        <div class="bigbox">
            <div class="box" v-for="(item,index) in producer_data" :key="index">
                <div class="boximg">
                    <img :src="item.url" alt="">
                </div>
                <div class="boxtext">
                    <h4>{{item.name}}</h4>
                    <hr>
                    <p>联系电话：{{item.tel}}</p>
                    <p>联系人：{{item.director}}</p>
                    <p>公司简介：{{item.description}}</p>
                </div>
            </div>
        </div>

            <!-- footer -->
        <div class="footer-bg">
            <div class="Footer">
                <ul>
                    <a href="http://www.beep.cn/" target="_blank"><li>必普网</li></a>
                    <a href="http://www.moni.cn/" target="_blank"><li>汽车模拟器</li></a>
                    <a href="http://www.moni.cn/" target="_blank"><li>墨泥网</li></a>
                    <a href="http://www.moni.cn/" target="_blank"><li>模拟驾驶</li></a>
                 </ul>
            <div>备案号：赣ICP备14004824号-1</div>
      </div>
    </div>
    </div>
</template>

<script>
import axios from 'axios';
import qs from 'qs';
export default {
    name:"manufacturer",
    data(){
        return{
            producer_data:''
        }
    },
    methods:{
         // 获取企业版商家
      get_company_producer(){
        axios({
          url: `http://47.97.155.31:8080/index/company`, // 后端的接口地址
          method: "get",
          transformRequest: [
            function (data) {
              data = qs.stringify(data);
              return data;
            },
          ],
          headers: {
            "Content-Type": "application/x-www-form-urlencoded;charset=utf-8",
          },
          dataType: "json",
          })
          .then((res) => {
            // console.log("公司商家连接成功"); // 这里多打印一句提示，只是为了更直观一点
            // console.log(res); // res 是后端回传的数据，如果连接成功，可以把res打印出来。
            this.producer_data = res.data.data
          })
          .catch(function (error) {
            console.log("连接失败"); // 作用同上
            console.log(error); // 如果连接失败，会抛出错误信息。
          }); 
      },
    },
    mounted(){
        this.get_company_producer();
    }
}
</script>

<style scoped>
#manufacturer{
    background: url("../assets/image/index/textbg.jpg");
    position: absolute;
    top: 0;
    width: 100%;
    background-size:cover;
    z-index: -1;
}
h2{
    position: absolute;
    top: 10rem;
    width: 100%;
    text-align: center;
    letter-spacing: 0.2rem;
}
.bigbox{
    width: 100%;
    box-sizing: border-box;
    padding: 0 10rem;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    margin-top: 15rem;
}
.box{
    width: 15rem;
    min-height: max-content;
    background: white;
    font-size: 0.8rem;
    /* margin:1rem; */
    margin-bottom: 1rem;
    box-shadow: 0 0 5px black;
}
.boximg{
    /* height: 100%; */
    text-align: center;
}
.boximg img{
    width: 8rem;
    height: 8rem;
}
.boxtext{
    padding: 0 0.5rem;
    padding-bottom: 1rem;
}
.boxtext p{
    margin-top: 0.5rem;
    letter-spacing: 0.1rem;
}
/* footer */
.footer-bg{
  position: relative;
  height: 10rem;
  background: url("../assets/image/manufacture/footer.png");
  background-size: cover;
}
.Footer{
  position: absolute;
  bottom: 0;
    width: 100%;
    font-size: 0.8rem;
    text-align: center;
    padding-bottom: 1rem;
    border-top: 1px solid white;
    color: white;
}
.Footer ul li{
    list-style: none;
    float: left;
    padding: 0.5rem;
}
.Footer ul{
   display: inline-block;
}
.Footer a{
    text-decoration: none;
    color: white;
}

</style>